<template>
  <div class="page-view-container" v-resize="handleResize">
    <div id="page-view">
      <div
        class="complex-item"
        v-for="item in complexList"
        :style="{
          width: `${item.w}px`,
          height: `${item.h}px`,
          zIndex: item.z,
          top: `${item.y}px`,
          left: `${item.x}px`,
          transform: `rotate(${item.r}deg)`,
        }"
        :key="item.id"
      >
        <component :is="item.name" :config="item.config" :count="item.count" />
      </div>
    </div>
  </div>
</template>

<script>
import ComplexList from "@/library/components";
export default {
  directives: {
    resize: {
      bind(e, binding) {
        let width = 0;
        let height = 0;
        const isReize = () => {
          let offsetWidth = e.offsetWidth;
          let offsetHeight = e.offsetHeight;
          if (width !== offsetWidth || height !== offsetHeight) {
            const value = {
              width: offsetWidth,
              height: offsetHeight,
            };
            binding.value(value);
          }
          width = offsetWidth;
          height = offsetHeight;
        };
        e.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(e) {
        clearInterval(e.__vueSetInterval__);
      },
    },
  },
  data() {
    return {
      page: ComplexList(),
      complexList: [],
      zoom: 1,
      id: null,
      width: null,
      height: null,
      allWidth: null,
    };
  },
  created() {
    this.complexList = JSON.parse(localStorage.getItem("complex"));
  },
  mounted() {
    this.FullContainer("page-view");
  },
  methods: {
    handleResize(data) {
      this.zoom = data.width / 1920;
    },
    /**
     * 入参
     * @param id
     * @param width 自适应原始宽度，默认1920
     * @param height 自适应原始高度，默认1080
     */
    FullContainer(id, width = 1920, height = 1080) {
      document
        .getElementById(id)
        .setAttribute("style", `overflow: hidden;transform-origin: left top;`);
      document.getElementById(id).style.width = `${width}px`;
      document.getElementById(id).style.height = `${height}px`;
      this.id = id;
      this.width = width;
      this.height = height;
      this.allWidth = width;
      this.debounce(100, this.initWH(id));
      this.bindDomResizeCallback();
    },

    initWH(id, resize = true) {
      return new Promise((resolve) => {
        const dom = document.getElementById(id);

        let width = dom ? dom.clientWidth : 0;
        let height = dom ? dom.clientHeight : 0;
        console.log(width);

        if (!dom) {
          console.warn(
            "DataV: Failed to get dom node, component rendering may be abnormal!"
          );
        } else if (!width || !height) {
          console.warn(
            "DataV: Component width or height is 0px, rendering abnormality may occur!"
          );
        }

        if (resize) this.onResize();
        resolve();
      });
    },

    onResize() {
      const { allWidth, id } = this;

      document.getElementById(id).style.transform = `scale(${
        document.body.clientWidth / allWidth
      },${document.body.clientHeight / this.height})`;
    },

    bindDomResizeCallback() {
      window.addEventListener("resize", () => {
        this.debounce(100, this.initWH(this.id));
      });
    },

    debounce(delay, callback) {
      let lastTime;

      return function () {
        clearTimeout(lastTime);

        const [that, args] = [this, arguments];
        lastTime = setTimeout(() => {
          callback.apply(that, args);
        }, delay);
      };
    },
  },
};
</script>

<style scoped lang="scss">
.page-view-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;

  #page-view {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .complex-item {
    position: absolute;
  }
}
</style>
